
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.numberCard {
  margin: 0 10px;
  padding: 32px;
  margin-bottom: 24px;
  cursor: pointer;

  .iconWarp {
    font-size: 54px;
    float: left;
  }

  .content {
    width: 100%;
    padding-left: 78px;

    .title {
      line-height: 16px;
      font-size: 16px;
      margin-bottom: 8px;
      height: 16px;
      .text-overflow();
    }

    .number {
      line-height: 32px;
      font-size: 24px;
      height: 32px;
      .text-overflow();
    }
  }
}

.green {
  color: #64ea91
}

.blue {
  color: #8fc9fb
}

.purple {
  color: #d897eb
}

.red {
  color: #f69899
}

.yellow {
  color: #f8c82e
}

.peach {
  color: #f797d6
}

.borderBase {
  color: #e5e5e5
}

.borderSplit {
  color: #f4f4f4
}

.grass {
  color: #d6fbb5
}

.sky {
  color: #c1e0fc
}
